<template>
  <div class="table-tree">
    <je-panel v-bind="options" ref="panel">
      <!-- 顶部按钮开始 -->
      <template #tbar>
        <div class="tree-button">
          <span>
            <je-tooltip placement="top">
              <template #title>{{ $t('leftTree.addModule') }}</template>
              <je-button
                type="text"
                size="small"
                :disabled="btnDisabledData.module"
                @click="handlerBtn('module')"
              >
                <template #icon>
                  <i class="jeicon jeicon-module" />
                </template>
              </je-button>
            </je-tooltip>
          </span>
          <span>
            <je-tooltip placement="top">
              <template #title>{{ $t('leftTree.addTable') }}</template>
              <je-button
                type="text"
                size="small"
                :disabled="btnDisabledData.table"
                @click="handlerBtn('table')"
              >
                <template #icon>
                  <i class="jeicon jeicon-table" />
                </template>
              </je-button>
            </je-tooltip>
          </span>
          <span>
            <je-tooltip placement="top">
              <template #title>{{ $t('leftTree.addView') }}</template>
              <je-button
                type="text"
                size="small"
                :disabled="btnDisabledData.view"
                @click="handlerBtn('view')"
              >
                <template #icon>
                  <i class="jeicon jeicon-process" />
                </template>
              </je-button>
            </je-tooltip>
          </span>
          <span>
            <je-tooltip placement="top">
              <template #title>{{ $t('leftTree.copy') }}</template>
              <je-button
                type="text"
                size="small"
                :disabled="btnDisabledData.copy"
                @click="handlerBtn('copy')"
              >
                <template #icon>
                  <i class="fal fa-copy" />
                </template>
              </je-button>
            </je-tooltip>
          </span>
          <span>
            <je-tooltip placement="top">
              <template #title>{{ $t('leftTree.import') }}</template>
              <je-button
                type="text"
                size="small"
                :disabled="btnDisabledData.import"
                @click="handlerBtn('import')"
              >
                <template #icon>
                  <i class="fal fa-file-import" />
                </template>
              </je-button>
            </je-tooltip>
          </span>
          <span>
            <je-tooltip placement="top">
              <template #title>{{ $t('leftTree.export') }}</template>
              <je-button type="text" size="small" @click="handlerBtn('export')">
                <template #icon>
                  <i class="fal fa-file-export" />
                </template>
              </je-button>
            </je-tooltip>
          </span>
          <span>
            <je-tooltip placement="top">
              <template #title>{{ $t('leftTree.packUpAll') }}</template>
              <je-button type="text" size="small" @click="handlerBtn('packUp')">
                <template #icon>
                  <i class="fal fa-layer-group" />
                </template>
              </je-button>
            </je-tooltip>
          </span>
        </div>
      </template>
      <!-- 顶部按钮结束 -->
      <!-- Tree开始 -->
      <template #default>
        <je-tree
          ref="treeview"
          class="table-treeView"
          draggable
          :search="{ style: 'height:40px;' }"
          :tree-config="{
            trigger: 'cell-dblclick',
            rowField: 'id',
            parentField: 'parent',
          }"
          :loading="loading"
          size="mini"
          :data="treeData"
          @drop="sortTreeData"
          @before-drop="beforedrop"
          @current-change="handlerSelect"
          @search-select="doSearchChange"
        >
          <template #nodeIcon="{ row }">
            <span
              v-if="
                row.bean.RESOURCETABLE_CHILDTABLECODES != undefined &&
                row.bean.RESOURCETABLE_CHILDTABLECODES != ''
              "
              class="beforesign"
            ></span>
            <span
              v-if="
                row.bean.RESOURCETABLE_PARENTTABLECODES != undefined &&
                row.bean.RESOURCETABLE_PARENTTABLECODES != ''
              "
              class="aftersign"
            >
            </span>
            <template v-if="row.nodeInfo === 'MODULE'">
              <i style="color: #ffba3d" class="fas fa-folder"></i>
            </template>
            <template v-else-if="row.nodeInfo === 'PT'">
              <i
                :style="`color: ${row.bean.RESOURCETABLE_IMPORT == '1' ? '#333333' : '#3265F5'}`"
                class="jeicon jeicon-table"
              ></i>
            </template>
            <template v-else-if="row.nodeInfo === 'TREE'">
              <i
                :style="`color: ${row.bean.RESOURCETABLE_IMPORT == '1' ? '#333333' : '#D70028'}`"
                class="jeicon jeicon-treetable"
              ></i>
            </template>
            <template v-else-if="row.nodeInfo === 'VIEW'">
              <i
                :style="`color: ${row.bean.RESOURCETABLE_IMPORT == '1' ? '#333333' : '#F59B22'}`"
                class="jeicon jeicon-process"
              ></i>
            </template>
          </template>
          <template #action="options">
            <je-menu
              v-if="options.row.nodeInfo === 'MODULE'"
              @click="({ key: menuKey }) => handlerBtn(menuKey, options)"
            >
              <je-menu-item key="module">
                <i style="font-size: 14px; margin-right: 10px" class="jeicon jeicon-module" />
                {{ $t('leftTree.addModule') }}
              </je-menu-item>
              <je-menu-item key="table">
                <i style="font-size: 14px; margin-right: 10px" class="jeicon jeicon-table" />
                {{ $t('leftTree.addTable') }}
              </je-menu-item>
              <je-menu-item key="view">
                <i style="font-size: 14px; margin-right: 10px" class="jeicon jeicon-process" />
                {{ $t('leftTree.addView') }}
              </je-menu-item>
              <je-menu-item key="import">
                <i style="font-size: 14px; margin-right: 10px" class="fal fa-file-import" />
                {{ $t('leftTree.import') }}
              </je-menu-item>
              <je-menu-item key="shift" style="border-top: 1px solid #e6e6e6">
                <i style="font-size: 14px; margin-right: 10px" class="fal fa-folder-upload" />
                {{ $t('leftTree.transfer') }}
              </je-menu-item>
              <je-menu-item key="rename">
                <i style="font-size: 14px; margin-right: 10px" class="jeicon jeicon-edit" />
                {{ $t('addModuleModal.title') }}
              </je-menu-item>
              <je-menu-item
                key="delete"
                :disabled="options.row.children.length > 0"
                style="border-top: 1px solid #e6e6e6"
              >
                <i style="font-size: 14px; margin-right: 10px" class="jeicon jeicon-times" />
                {{ $t('leftTree.delete') }}
              </je-menu-item>
            </je-menu>
            <je-menu
              v-else-if="options.row.nodeInfo === 'PT' || options.row.nodeInfo === 'TREE'"
              @click="({ key: menuKey }) => handlerBtn(menuKey, options)"
            >
              <je-menu-item v-if="options.row.bean.RESOURCETABLE_IMPORT == '1'" key="sync">
                <i style="font-size: 14px; margin-right: 10px" class="jeicon jeicon-upload-cloud" />
                {{ $t('leftTree.synchronous') }}
              </je-menu-item>
              <je-menu-item key="copy">
                <i style="font-size: 14px; margin-right: 10px" class="fal fa-copy" />
                {{ $t('leftTree.copy') }}
              </je-menu-item>
              <je-menu-item key="shift" style="border-top: 1px solid #e6e6e6">
                <i style="font-size: 14px; margin-right: 10px" class="fal fa-folder-upload" />
                {{ $t('leftTree.transfer') }}
              </je-menu-item>
              <je-menu-item key="clear">
                <i style="font-size: 14px; margin-right: 10px" class="fal fa-trash-alt" />
                {{ $t('leftTree.remove') }}
              </je-menu-item>
              <je-menu-item key="delete">
                <i style="font-size: 14px; margin-right: 10px" class="jeicon jeicon-times" />
                {{ $t('leftTree.delete') }}
              </je-menu-item>
            </je-menu>

            <je-menu
              v-else-if="options.row.nodeInfo === 'VIEW'"
              @click="({ key: menuKey }) => handlerBtn(menuKey, options)"
            >
              <je-menu-item v-if="options.row.bean.RESOURCETABLE_IMPORT == '1'" key="sync">
                <i style="font-size: 14px; margin-right: 10px" class="jeicon jeicon-upload-cloud" />
                {{ $t('leftTree.synchronous') }}
              </je-menu-item>
              <je-menu-item v-if="options.row.bean.RESOURCETABLE_IMPORT != '1'" key="updateView">
                <i style="font-size: 14px; margin-right: 10px" class="fal fa-tools" />
                {{ $t('leftTree.design') }}
              </je-menu-item>
              <je-menu-item key="shift" style="border-top: 1px solid #e6e6e6">
                <i style="font-size: 14px; margin-right: 10px" class="fal fa-folder-upload" />
                {{ $t('leftTree.transfer') }}
              </je-menu-item>
              <je-menu-item key="clear">
                <i style="font-size: 14px; margin-right: 10px" class="fal fa-trash-alt" />
                {{ $t('leftTree.remove') }}
              </je-menu-item>
              <je-menu-item key="delete">
                <i style="font-size: 14px; margin-right: 10px" class="jeicon jeicon-times" />
                {{ $t('leftTree.delete') }}
              </je-menu-item>
            </je-menu>
          </template>
        </je-tree>
      </template>
      <!-- Tree结束 -->
      <template #bbar>
        <div class="tree-footer">
          <je-dropdown :trigger="['click']" placement="top">
            <a class="ant-dropdown-link" @click.prevent>
              <i class="conditionicon fas fa-question-circle" @click="clickIcon" />
              {{ ProductDatas.selectedData.productName }}
              <i class="fal fa-angle-down"></i>
            </a>
            <template #overlay>
              <je-menu style="min-width: 230px; max-width: 400px" class="tabel-productMune">
                <je-menu-item v-for="menuData in ProductDatas.menuDatas" :key="menuData.productId">
                  <a @click="changeProduct(menuData)">{{ menuData.productName }}</a>
                </je-menu-item>
              </je-menu>
            </template>
          </je-dropdown>
        </div>
      </template>
    </je-panel>
    <!-- 添加弹窗开始 -->
    <!-- 添加模块开始 -->
    <ModalAddModule
      v-if="modalType == 'module' || modalType == 'rename'"
      :modal-show="modalType"
      :modal-data="modalData"
      :product-data="ProductDatas.selectedData"
      @changeData="changeData"
    />

    <!-- 添加模块结束 -->
    <!-- 添加表开始 -->
    <ModalAddTable
      v-if="modalType == 'table'"
      :modal-show="modalType == 'table'"
      :modal-data="modalData"
      :product-data="ProductDatas.selectedData"
      @changeData="changeData"
    />
    <!-- 添加表结束 -->
    <!-- 复制开始 -->
    <ModalCopy
      v-if="modalType == 'copy'"
      :modal-show="modalType == 'copy'"
      :modal-data="modalData"
      :product-data="ProductDatas.selectedData"
      @changeData="changeData"
    />
    <!-- 复制结束 -->
    <!-- 导入开始 -->
    <!-- ModalImport
      v-if="modalType == 'import'"
      :modal-show="modalType == 'import'"
      :modal-data="modalData"
      :product-data="ProductDatas.selectedData"
      @changeData="changeData"
    /> -->
    <!-- 导入结束 -->
    <!-- 转移开始 -->
    <ModalShift
      v-if="modalType == 'shift'"
      :modal-show="modalType == 'shift'"
      :modal-data="modalData"
      :product-data="ProductDatas.selectedData"
      @changeData="changeData"
    />
    <!-- 转移结束 -->
    <!-- 导出开始 -->
    <ModalExport
      v-if="modalType == 'export'"
      :modal-show="modalType == 'export'"
      :modal-data="modalData"
      :product-data="ProductDatas.selectedData"
      @changeData="changeData"
    />
    <!-- 导出结束 -->
    <!-- 设计视图开始 -->
    <ViewDesign
      v-if="modalType == 'view' || modalType == 'updateView'"
      :modal-show="viewModalType"
      :modal-data="modalData.bean"
      :product-data="ProductDatas.selectedData"
      @changeData="changeData"
    />
    <!-- 设计视图结束 -->
    <!-- 添加弹窗结束 -->
  </div>
  <je-modal
    v-model:visible="visibleProduct"
    width="400"
    title="说明"
    height="auto"
    :resize="false"
    class="productinfo-modal"
    ok-button
    button-align="right"
    :maximizable="false"
  >
    <div>切换服务，维护对应服务中的资源表数据。</div>
  </je-modal>
</template>
<script>
  //radio-group
  import { defineComponent, watch, ref, onMounted, reactive, toRaw, createVNode } from 'vue';
  import { Tree, Input, Menu, Dropdown, Tooltip, Button, Modal, Panel } from '@jecloud/ui';
  import {
    getData,
    getTree,
    deleteModule,
    deleteTable,
    syncTable,
    moveTable,
    getDeleteCheck,
  } from '../../api/index';
  import ModalAddModule from './modal/addmodule.vue';
  import ModalAddTable from './modal/addtable.vue';
  import ModalCopy from './modal/copy.vue';
  import ModalShift from './modal/shift.vue';
  import ModalExport from './modal/export.vue';
  import ViewDesign from '../view-design/index.vue';
  import VueEvent from '../../helper/model/event';
  import { showImportWin } from '@/hooks/util.jsx';
  import { encode, decode, getCurrentUser, isNotEmpty } from '@jecloud/utils';
  import { useRouter } from '@common/router';

  export default defineComponent({
    components: {
      JeTree: Tree,
      JeMenu: Menu,
      JeMenuItem: Menu.Item,
      JeDropdown: Dropdown,
      JeTooltip: Tooltip,
      JeButton: Button,
      JePanel: Panel,
      JeModal: Modal,
      ModalAddModule,
      ModalAddTable,
      ModalCopy,
      ModalShift,
      ModalExport,
      ViewDesign,
    },
    emits: ['getProductData', 'callBackInfo', 'syncTableRefresh'],
    setup(props, context) {
      const $router = useRouter();
      const treeview = ref(null);
      const selectedKeys = ref([]);
      //产品数据
      const ProductDatas = reactive({
        menuDatas: [],
        selectedData: {},
      });
      //按钮只读数据
      const btnDisabledData = ref({
        module: false,
        table: true,
        view: true,
        copy: true,
        import: true,
      });

      let selectNode = ref({});

      // 从localStorage中获取用户唯一标识
      const { deptmentUserId } = getCurrentUser();
      const storageProductId = ref(localStorage.getItem(deptmentUserId) || '');

      //获得tree的数据
      let loading = ref(true);
      let treeData = ref([]);
      const getTreeData = (checkedObj) => {
        const params = {
          tableCode: 'JE_CORE_RESOURCETABLE',
          SY_PRODUCT_ID: ProductDatas.selectedData.productId,
        };
        getTree(params)
          .then((data) => {
            treeData.value = data.children;
            loading.value = false;
            if (isNotEmpty(checkedObj)) {
              setTimeout(() => {
                const treeView = treeview.value;
                const row = treeView.getRowById(checkedObj.id);
                if (row) {
                  handlerSelect({ row, newValue: true });
                  treeView.setTreeExpand4Path({ row, expand: true }).then((row) => {
                    treeView.setSelectRow(row);
                    treeView.scrollToRow(row);
                  });
                }
              }, 200);
            }
          })
          .catch((e) => {
            loading.value = false;
            Modal.alert(e.message, 'error');
          });
      };

      //树拖拽前事件
      const beforedrop = ({ row, target, action }) => {
        //表不能不在Root节点下拖动排序
        if (
          ['PT', 'TREE', 'VIEW'].includes(row.nodeInfo) &&
          target.parent == 'ROOT' &&
          action == 'sort'
        ) {
          return false;
        }

        //表下面不能添加任何节点
        if (['PT', 'TREE', 'VIEW'].includes(target.nodeInfo) && action == 'insert') {
          return false;
        }
      };
      //树拖拽
      const sortTreeData = ({ row, info, action }) => {
        const params = {
          tableCode: 'JE_CORE_RESOURCETABLE',
          id: info.id,
          toId: '',
          place: '',
        };
        //如果拖拽在节点里面
        if (action == 'insert') {
          params.place = 'inside';
          params.toId = info.parentId;
        } else {
          //如果在节点的上面
          if (info.nextId != undefined) {
            params.place = 'above';
            params.toId = info.nextId;
          } else if (info.prevId != undefined) {
            params.place = 'below';
            params.toId = info.prevId;
          }
        }
        moveTable(params, { pd: 'meta' })
          .then((obj) => {
            Modal.notice({ content: obj.message, status: 'success' });
          })
          .catch((e) => {
            Modal.alert(e.message, 'error');
          });
      };
      // 获得产品的数据
      const getProductData = () => {
        getData({
          tableCode: 'JE_PRODUCT_MANAGE',
          funcCode: 'JE_PLATFORM_PRODUCT_MANAGE',
          j_query: JSON.stringify({ order: [{ code: 'SY_ORDERINDEX', type: 'ASC' }] }),
          PRODUCT_ENABLE_STATE: '1',
        })
          .then((data) => {
            const menuDatas = [];
            data.rows.forEach((item) => {
              menuDatas.push({
                productId: item.JE_PRODUCT_MANAGE_ID,
                productName: item.PRODUCT_NAME,
                productCode: item.PRODUCT_CODE,
              });
            });
            ProductDatas.menuDatas = menuDatas;
            //用产品的ID给缓存里面存对应的数据
            const urlParams = parseUrlParams(decodeURIComponent(window.location.href));
            // 首先判断缓存里面有值，那么从缓存里面取值设置产品信息,和功能ID
            // 如果地址栏上有productId,那么就要打开对应的服务，如果没有的话，那就找借口返回的第一个，更新storageProductId.value里面的缓存
            const { productId = '', id = '' } = urlParams;
            // 通过productId从产品的接口中找对的item
            const checkId =
              productId || storageProductId.value || ProductDatas.menuDatas[0].productId;
            const checkItem = menuDatas.find((item) => checkId == item.productId) || menuDatas[0];
            ProductDatas.selectedData = checkItem; // 设置产品
            storageProductId.value = checkId;
            // 更新缓存
            localStorage.setItem(deptmentUserId, storageProductId.value);
            context.emit('getProductData', ProductDatas.selectedData);

            //加载树的数据
            setTimeout(() => {
              getTreeData({ id });
            }, 100);
          })
          .catch((e) => {
            Modal.alert(e.message, 'error');
          });
      };

      //监听事件刷新tree数据
      VueEvent.on('loadData', (data) => {
        if (data.type == 'loadTree') {
          getTreeData();
        } else {
          getTreeData();
          //刷新tabs面板title
          context.emit('callBackInfo', data);
        }
      });
      // 获取地址拦参数
      const parseUrlParams = (url) => {
        const params = {};
        if (!url || url === '' || typeof url !== 'string') {
          return params;
        }
        const paramsStr = url.split('?')[1];
        if (!paramsStr) {
          return params;
        }
        const paramsArr = paramsStr.replace(/&|=/g, ' ').split(' ');
        for (let i = 0; i < paramsArr.length / 2; i++) {
          const value = paramsArr[i * 2 + 1];
          params[paramsArr[i * 2]] = value === 'true' ? true : value === 'false' ? false : value;
        }
        return params;
      };

      //监听切换树形选中
      VueEvent.on('checkedTreeNode', (data) => {
        const treeView = treeview.value;
        const row = treeView.getRowById(data.id);
        const checkedNodes = treeView.getSelectedRecords();
        // 如果单前选中的节点不是删除的对应节点
        if (checkedNodes.length > 0 && checkedNodes[0].id != row.id && !data.checked) {
          return false;
        }
        if (row) {
          handlerSelect({ row, newValue: data.checked });
          if (data.checked) {
            treeView.setTreeExpand4Path({ row, expand: true }).then((row) => {
              treeView.setSelectRow(row);
              treeView.scrollToRow(row);
            });
          } else {
            treeView.setSelectRow(row, false);
          }
        }
      });

      //点击menu
      const onContextMenuClick = (treeKey, menuKey) => {
        //console.log(`treeKey: ${treeKey}, menuKey: ${menuKey}`);
      };
      onMounted(() => {
        getProductData();
      });

      //点击顶部顶部按钮
      //点击添加模块按钮
      const modalType = ref('');
      const viewModalType = ref('add');
      let modalData = ref({});
      const handlerBtn = (type, options) => {
        if (options) {
          const { tooltip } = options;
          tooltip.visible = false;
        }
        const nodeData = options ? options.row : '';
        modalData.value = nodeData ? nodeData : selectNode.value;
        modalType.value = type;

        switch (type) {
          case 'updateView': // 修改视图
            viewModalType.value = 'update';
            break;
          case 'view': // 添加视图
            viewModalType.value = 'add';
            break;
          case 'packUp': // 全部收起
            treeview.value.clearTreeExpand();
            break;
          case 'delete': // 删除表和模块
            doDelete({ nodeData });
            break;
          case 'clear': // 清空
            doClear({ nodeData });
            break;
          case 'sync': // 同步结构
            doSyncStructure({ nodeData });
            break;
          case 'import': // 同步结构
            showImportWin({
              modalData: modalData.value,
              productData: ProductDatas.selectedData,
              callback: getTreeData,
            });
            break;
        }
      };

      // 删除模块和表
      const doDelete = ({ nodeData }) => {
        const children = nodeData.children;
        if (children && children.length > 0) {
          Modal.alert('只能删除子节点！', 'warning');
        } else {
          //删除模块
          if (nodeData.nodeType == 'GENERAL') {
            Modal.confirm({
              title: '删除',
              content: '是否确认删除模块？',
              okButton: () => {
                deleteModule({ tableCode: 'JE_CORE_RESOURCETABLE', ids: nodeData.id })
                  .then((data) => {
                    Modal.notice({ content: data.message, status: 'success' });
                    getTreeData();
                    deleteChecked(nodeData.id);
                  })
                  .catch((e) => {
                    Modal.alert(e.message, 'error');
                  });
              },
            });
          } else {
            //删除表
            // 验证表是否可删除
            getDeleteCheck({ tableId: nodeData.id })
              .then(() => {
                Modal.confirm({
                  title: '删除',
                  content:
                    '该操作会删除资源表表结构以及表对应的功能（含功能下级的子功能）、子功能、菜单，确认删除吗？  ',
                  okButton: () => {
                    deleteTable(
                      {
                        ids: nodeData.id,
                        SY_PRODUCT_ID: ProductDatas.selectedData.productId,
                      },
                      { pd: ProductDatas.selectedData.productCode },
                    )
                      .then((data) => {
                        Modal.notice({ content: data.message, status: 'success' });
                        getTreeData();
                        context.emit('callBackInfo', { key: nodeData.id, type: 'delete' });
                        deleteChecked(nodeData.id);
                      })
                      .catch((e) => {
                        Modal.alert(e.message, 'error');
                      });
                  },
                });
              })
              .catch((e) => {
                Modal.alert(e.message, 'error');
              });
          }
        }
      };

      // 清空
      const doClear = ({ nodeData }) => {
        const children = nodeData.children;
        if (children && children.length > 0) {
          Modal.alert('只能清空子节点！', 'warning');
        } else {
          Modal.confirm({
            title: '清空（不删库）',
            content: '是否确认清空表、视图？',
            okButton: () => {
              deleteModule({ tableCode: 'JE_CORE_RESOURCETABLE', ids: nodeData.id })
                .then((data) => {
                  Modal.notice({ content: data.message, status: 'success' });
                  getTreeData();
                  context.emit('callBackInfo', { key: nodeData.id, type: 'delete' });
                  deleteChecked(nodeData.id);
                })
                .catch((e) => {
                  Modal.alert(e.message, 'error');
                });
            },
            onCancel() {},
          });
        }
      };

      // 同步结构
      const doSyncStructure = ({ nodeData }) => {
        Modal.confirm({
          title: '同步结构',
          content: '会将资源表的表结构与数据库物理表结构进行同步!【慎重操作】',
          okButton: {
            text: '继续同步',
            handler: () => {
              syncTable(
                {
                  JE_CORE_RESOURCETABLE_ID: nodeData.id,
                  SY_PRODUCT_ID: ProductDatas.selectedData.productId,
                },
                { pd: ProductDatas.selectedData.productCode },
              )
                .then((data) => {
                  //刷新表格列
                  context.emit('syncTableRefresh');
                  //刷新左侧树
                  getTreeData();
                  Modal.notice({ content: data.message, status: 'success' });
                })
                .catch((e) => {
                  Modal.alert(e.message, 'error');
                });
            },
          },
        });
      };

      const changeData = (val, data) => {
        modalType.value = '';
        if (val == 'add') {
          getTreeData();
        } else if (val == 'checked') {
          getTreeData(data);
        }
      };

      //搜索框选中事件
      const doSearchChange = ({ row }) => {
        handlerSelect({ row: row, newValue: true });
      };

      //选中
      const handlerSelect = ({ row, newValue }) => {
        if (newValue != '' && newValue != undefined && newValue != null) {
          selectNode.value = row;

          getBtnDisabled(true, row);
          //如果是字节点
          if (row.nodeInfo != 'MODULE') {
            let icon = 'jeicon jeicon-table';
            if (row.nodeInfo == 'TREE') {
              icon = 'jeicon jeicon-treetable';
            } else if (row.nodeInfo == 'VIEW') {
              icon = 'jeicon jeicon-process';
            }
            const tabPanelData = {
              title: row.text,
              key: row.id,
              icon,
            };
            context.emit('callBackInfo', tabPanelData);
          }
        } else {
          selectNode.value = {};
          getBtnDisabled(false, row);
        }
      };
      //如果删除的是选中的节点
      const deleteChecked = (id) => {
        if (selectNode.value.id != undefined && selectNode.value.id == id) {
          selectNode.value = {};
          getBtnDisabled(false);
        }
      };

      //按钮只读控制
      const getBtnDisabled = (selected, node) => {
        let DisabledData = {
          module: false,
          table: true,
          view: true,
          copy: true,
          import: true,
          export: true,
          packUp: false,
        };
        //如果选中
        if (selected) {
          //选中模块 可以添加模块,表,视图,导入,导出,全部收起
          if (node.nodeInfo == 'MODULE') {
            DisabledData = {
              module: false,
              table: false,
              view: false,
              copy: true,
              import: false,
              export: false,
              packUp: false,
            };
          }
          //选中表和视图 可以复制,导出,全部收起
          if (['PT', 'TREE'].indexOf(node.nodeInfo) != -1) {
            DisabledData = {
              module: true,
              table: true,
              view: true,
              copy: false,
              import: true,
            };
          }
          //选中表和视图 可以导出,全部收起
          if (node.nodeInfo == 'VIEW') {
            DisabledData = {
              module: true,
              table: true,
              view: true,
              copy: true,
              import: true,
            };
          }
        }
        btnDisabledData.value = DisabledData;
      };

      //切换产品
      const changeProduct = (menuData) => {
        if (menuData.productId == ProductDatas.selectedData.productId) {
          return;
        }
        storageProductId.value = menuData.productId;
        localStorage.setItem(deptmentUserId, storageProductId.value);
        context.emit('getProductData', menuData);
        ProductDatas.selectedData = menuData;
        getTreeData();
        context.emit('callBackInfo', { type: 'removeAll' });
        btnDisabledData.value = {
          module: false,
          table: true,
          view: true,
          copy: true,
          import: true,
        };
        selectNode.value = {};
      };

      //点击icon
      const visibleProduct = ref(false);
      const clickIcon = (event) => {
        event.stopPropagation();
        visibleProduct.value = true;
      };
      return {
        selectedKeys,
        treeData,
        onContextMenuClick,
        handlerBtn,
        handlerSelect,
        labelCol: {
          span: 5,
        },
        wrapperCol: {
          span: 20,
        },
        changeData,
        sortTreeData,
        modalData,
        modalType,
        allowclear: true,
        btnDisabledData,
        ProductDatas,
        changeProduct,
        viewModalType,
        clickIcon,
        options: { tbar: { size: 40 }, bbar: { size: 40 } },
        treeview,
        beforedrop,
        visibleProduct,
        loading,
        doSearchChange,
      };
    },
  });
</script>
<style lang="less" scoped>
  .table-tree {
    /*  border-top: 1px solid #e6e6e6; */
    border-bottom: 1px solid #e6e6e6;
    .beforesign {
      position: relative;
      display: inline-block;
      height: 4px;
      &::before {
        content: '';
        display: inline-block;
        width: 4px;
        height: 4px;
        background: #d70000;
        position: absolute;
        top: -7px;
        left: -6px;
      }
    }
    .aftersign {
      position: relative;
      display: inline-block;
      height: 4px;
      &::after {
        content: '';
        display: inline-block;
        width: 4px;
        height: 4px;
        background: #3265f5;
        position: absolute;
        bottom: -1px;
        left: -6px;
      }
    }
    ::-webkit-scrollbar {
      width: 0 !important;
    }
    position: relative;
    width: 100%;
    height: 100%;
    .ant-input-affix-wrapper.ant-select-selection-search-input {
      height: 40px !important;
      border-radius: 0;
      border-color: #e6e6e6;
    }
    .tree-button {
      height: 40px;
      border-left: 1px solid #e6e6e6;
      border-right: 1px solid #e6e6e6;
      border-top: 1px solid #e6e6e6;
      span {
        display: inline-block;
        line-height: 40px;
        margin: 0 1px;
        font-size: 14px;
      }
    }
    .tree-footer {
      height: 40px;
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      text-align: center;
      line-height: 40px;
      background: #f7f9fc;
      border-top: 1px solid #e6e6e6;
      border-left: 1px solid #e6e6e6;
      border-right: 1px solid #e6e6e6;
      font-size: 14px;
      .conditionicon {
        cursor: pointer;
      }
    }
  }
</style>
<style lang="less">
  .tabel-productMune {
    .ant-dropdown-menu-item .ant-dropdown-menu-title-content {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
  .table-tree {
    .ant-input-affix-wrapper.ant-select-selection-search-input:hover {
      border: 1px solid #5c8dff !important;
      box-shadow: none !important;
    }
    .ant-input-affix-wrapper.ant-select-selection-search-input {
      height: 40px !important;
      border-color: #e6e6e6 !important;
      border-radius: 0;
      .ant-input-suffix {
        .anticon.ant-input-clear-icon {
          top: 9px;
        }
      }
    }
    .ant-input-affix-wrapper-focused.ant-select-selection-search-input {
      border: 1px solid #5c8dff !important;
      box-shadow: none !important;
    }
    .je-panel .je-panel-item-region-default .vxe-table {
      border-right: 1px solid #e6e6e6;
    }
    .je-panel-bar-tbar {
      .je-tree-search-wrapper {
        .ant-select {
          height: 100%;
          .ant-select-selector {
            height: 100%;
            .ant-select-selection-search-input {
              height: 100%;
            }
          }
        }
      }
    }
  }
</style>
